import Editor from 'for-editor';
import { useEffect, useState } from 'react';
import {
  ArticleCommentModelState,
  IRouteComponentProps,
  useDispatch,
  useSelector,
} from 'umi';
import styles from './detail.less';
import './style.less';
import { Button, Popconfirm } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
const PageId: React.FC<IRouteComponentProps<{ id: string }>> = (props) => {
  let id = props.match.params.id;
  const { articleEditorItem } = useSelector(
    (state: { article: ArticleCommentModelState }) => state.article,
  );
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'article/getArticleEditorId',
      payload: id,
    });
  }, [id]);
  const [value, setValue] = useState(articleEditorItem.content);
  return (
    <div className={styles.editor_home}>
      <header className={styles.editor_id_header}>
        <div className={styles.editor_id_ghost}>
          <div className={styles.editor_id_content}>
            <div>
              <Popconfirm
                title="确认关闭？如果有内容变更，请先保存"
                placement="right"
                onConfirm={() => {
                  props.history.push('/article');
                }}
                okText="确认"
                cancelText="取消"
              >
                <button className={styles.amEditor_button_close}>
                  <CloseOutlined />
                </button>
              </Popconfirm>
              <span className={styles.editor_input_title}>
                <input
                  type="text"
                  placeholder="请输入文章名称"
                  defaultValue={articleEditorItem.title}
                  onClick={() => {}}
                />
              </span>
            </div>
            <span>
              <Button type="primary" onClick={() => {}}>
                <span>发布</span>
              </Button>
              <Button type="text">
                <span>
                  <svg
                    viewBox="64 64 896 896"
                    focusable="false"
                    data-icon="ellipsis"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path>
                  </svg>
                </span>
              </Button>
            </span>
          </div>
        </div>
      </header>
      <main className="editor_main">
        <Editor
          value={articleEditorItem.content}
          preview={true}
          subfield={true}
          onChange={(value) => {
            setValue(value);
          }}
          style={{ with: '100%' }}
        />
      </main>
    </div>
  );
};
export default PageId;
